<template>
  <el-tabs style="height: 100%;" v-model="editableTabsValue">
    <el-tab-pane label="产能现况" name="产能现况"><Production :Production="toSonProduction"></Production></el-tab-pane>
    <el-tab-pane label="综合效率" name="综合效率"><Efficiency :Efficiency="toSonEfficiency"></Efficiency></el-tab-pane>
    <el-tab-pane label="损失现况" name="损失现况"><Losses :Losses="toSonLosses"></Losses></el-tab-pane>
    <el-tab-pane label="Down指标" name="Down指标"><DownTarget :DownTarget="toSonDownTarget"></DownTarget></el-tab-pane>
    <el-tab-pane label="PM总计" name="PM总计"><PmOne :PmOne="toSonPmOne"></PmOne></el-tab-pane>
    <el-tab-pane label="PM详细" name="PM详细"><PmTwo :PmTwo="toSonPmTwo"></PmTwo></el-tab-pane>
    <el-tab-pane label="IDLE指标" name="IDLE指标"><Idle :Idle="toSonIdle"></Idle></el-tab-pane>
    <el-tab-pane label="其他指标" name="其他指标"><Other :Other="toSonOther"></Other></el-tab-pane>
  </el-tabs>
</template>

<script setup name="IMBRICATE">
  import Production from "./production.vue"
  import Efficiency from "./efficiency.vue"
  import Losses from "./losses.vue"
  import DownTarget from "./downTarget.vue"
  import PmOne from "./pm_one.vue"
  import PmTwo from "./pm_two.vue"
  import Idle from "./idle.vue"
  import Other from "./other.vue"

  const editableTabsValue = ref('产能现况')

  const toSonProduction = reactive({})
  const toSonEfficiency = reactive({})
  const toSonLosses = reactive({})
  const toSonDownTarget = reactive({})
  const toSonPmOne = reactive({})
  const toSonPmTwo = reactive({})
  const toSonIdle = reactive({})
  const toSonOther = reactive({})

  onActivated(() => {
    let { tabName, dataType, dataTime } = history?.state
    if(tabName && dataType && dataTime){
      editableTabsValue.value = history?.state?.tabName /* tabs 选择 */

      if(tabName === '产能现况'){
        toSonProduction.tabName = tabName
        toSonProduction.dataType = dataType
        toSonProduction.dataTime = dataTime
      }

      if(tabName === '综合效率'){
        toSonEfficiency.tabName = tabName
        toSonEfficiency.dataType = dataType
        toSonEfficiency.dataTime = dataTime
      }

      if(tabName === '损失现况'){
        toSonLosses.tabName = tabName
        toSonLosses.dataType = dataType
        toSonLosses.dataTime = dataTime
      }

      if(tabName === 'Down指标'){
        toSonDownTarget.tabName = tabName
        toSonDownTarget.dataType = dataType
        toSonDownTarget.dataTime = dataTime
      }

      if(tabName === 'PM总计'){
        toSonPmOne.tabName = tabName
        toSonPmOne.dataType = dataType
        toSonPmOne.dataTime = dataTime
      }

      if(tabName === 'PM详细'){
        toSonPmTwo.tabName = tabName
        toSonPmTwo.dataType = dataType
        toSonPmTwo.dataTime = dataTime
      }

      if(tabName === 'IDLE指标'){
        toSonIdle.tabName = tabName
        toSonIdle.dataType = dataType
        toSonIdle.dataTime = dataTime
      }

      if(tabName === '其他指标'){
        toSonOther.tabName = tabName
        toSonOther.dataType = dataType
        toSonOther.dataTime = dataTime
      }

    }
  })
</script>
<style lang="less" scoped>
:deep(.el-tabs__header){
  margin-left: 20px;
}
</style>
